/* 全局CSS变量定义 */
:root {
	/* 主色调 */
	--primary-color: #4FACFE;
	--secondary-color: #00F2FE;
	--accent-color: #FF6B6B;
	
	/* 功能色彩 */
	--success-color: #52C41A;
	--warning-color: #FAAD14;
	--error-color: #FF4D4F;
	--info-color: #1890FF;
	
	/* 中性色彩 */
	--text-primary: #333333;
	--text-secondary: #666666;
	--text-placeholder: #999999;
	--text-disabled: #CCCCCC;
	
	/* 背景色彩 */
	--bg-primary: #FFFFFF;
	--bg-secondary: #F8F9FA;
	--bg-tertiary: #F5F5F5;
	--bg-disabled: #F0F0F0;
	
	/* 边框色彩 */
	--border-primary: #E5E5E5;
	--border-secondary: #F0F0F0;
	--border-light: #F8F9FA;
	
	/* 阴影 */
	--shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
	--shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.2);
	
	/* 圆角 */
	--radius-small: 4px;
	--radius-medium: 8px;
	--radius-large: 12px;
	--radius-round: 50%;
	
	/* 间距 */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 12px;
	--spacing-lg: 16px;
	--spacing-xl: 20px;
	--spacing-xxl: 24px;
	
	/* 字体大小 */
	--font-size-xs: 10px;
	--font-size-sm: 12px;
	--font-size-md: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 18px;
	--font-size-xxl: 20px;
	--font-size-title: 24px;
	--font-size-hero: 32px;
	
	/* 行高 */
	--line-height-tight: 1.2;
	--line-height-normal: 1.4;
	--line-height-loose: 1.6;
	
	/* 层级 */
	--z-index-normal: 1;
	--z-index-tooltip: 100;
	--z-index-modal: 1000;
	--z-index-popup: 2000;
	--z-index-notification: 3000;
}

/* 通用重置样式 */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* 页面基础样式 */
page {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--font-size-lg);
	line-height: var(--line-height-normal);
	color: var(--text-primary);
	background-color: var(--bg-tertiary);
}

/* 文本样式类 */
.text-primary {
	color: var(--text-primary);
}

.text-secondary {
	color: var(--text-secondary);
}

.text-placeholder {
	color: var(--text-placeholder);
}

.text-disabled {
	color: var(--text-disabled);
}

.text-success {
	color: var(--success-color);
}

.text-warning {
	color: var(--warning-color);
}

.text-error {
	color: var(--error-color);
}

.text-info {
	color: var(--info-color);
}

/* 字体大小类 */
.text-xs {
	font-size: var(--font-size-xs);
}

.text-sm {
	font-size: var(--font-size-sm);
}

.text-md {
	font-size: var(--font-size-md);
}

.text-lg {
	font-size: var(--font-size-lg);
}

.text-xl {
	font-size: var(--font-size-xl);
}

.text-xxl {
	font-size: var(--font-size-xxl);
}

.text-title {
	font-size: var(--font-size-title);
}

.text-hero {
	font-size: var(--font-size-hero);
}

/* 字体粗细类 */
.font-light {
	font-weight: 300;
}

.font-normal {
	font-weight: 400;
}

.font-medium {
	font-weight: 500;
}

.font-semibold {
	font-weight: 600;
}

.font-bold {
	font-weight: 700;
}

/* 背景色类 */
.bg-primary {
	background-color: var(--bg-primary);
}

.bg-secondary {
	background-color: var(--bg-secondary);
}

.bg-tertiary {
	background-color: var(--bg-tertiary);
}

.bg-disabled {
	background-color: var(--bg-disabled);
}

.bg-success {
	background-color: var(--success-color);
}

.bg-warning {
	background-color: var(--warning-color);
}

.bg-error {
	background-color: var(--error-color);
}

.bg-info {
	background-color: var(--info-color);
}

/* 圆角类 */
.radius-small {
	border-radius: var(--radius-small);
}

.radius-medium {
	border-radius: var(--radius-medium);
}

.radius-large {
	border-radius: var(--radius-large);
}

.radius-round {
	border-radius: var(--radius-round);
}

/* 阴影类 */
.shadow-light {
	box-shadow: var(--shadow-light);
}

.shadow-medium {
	box-shadow: var(--shadow-medium);
}

.shadow-heavy {
	box-shadow: var(--shadow-heavy);
}

/* 间距类 */
.p-xs {
	padding: var(--spacing-xs);
}

.p-sm {
	padding: var(--spacing-sm);
}

.p-md {
	padding: var(--spacing-md);
}

.p-lg {
	padding: var(--spacing-lg);
}

.p-xl {
	padding: var(--spacing-xl);
}

.p-xxl {
	padding: var(--spacing-xxl);
}

.m-xs {
	margin: var(--spacing-xs);
}

.m-sm {
	margin: var(--spacing-sm);
}

.m-md {
	margin: var(--spacing-md);
}

.m-lg {
	margin: var(--spacing-lg);
}

.m-xl {
	margin: var(--spacing-xl);
}

.m-xxl {
	margin: var(--spacing-xxl);
}

/* 布局类 */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.flex-center {
	align-items: center;
	justify-content: center;
}

.flex-between {
	justify-content: space-between;
}

.flex-around {
	justify-content: space-around;
}

.flex-1 {
	flex: 1;
}

.items-center {
	align-items: center;
}

.items-start {
	align-items: flex-start;
}

.items-end {
	align-items: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

/* 文本对齐类 */
.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

/* 溢出处理类 */
.overflow-hidden {
	overflow: hidden;
}

.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.text-clamp-3 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* 定位类 */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.sticky {
	position: sticky;
}

/* 显示隐藏类 */
.visible {
	visibility: visible;
}

.invisible {
	visibility: hidden;
}

.opacity-0 {
	opacity: 0;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-100 {
	opacity: 1;
}

/* 通用按钮样式 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-md) var(--spacing-xl);
	border: none;
	border-radius: var(--radius-medium);
	font-size: var(--font-size-lg);
	font-weight: 500;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	user-select: none;
}

.btn-primary {
	background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
	color: #FFFFFF;
}

.btn-secondary {
	background: var(--bg-secondary);
	color: var(--text-primary);
	border: 1px solid var(--border-primary);
}

.btn-success {
	background: var(--success-color);
	color: #FFFFFF;
}

.btn-warning {
	background: var(--warning-color);
	color: #FFFFFF;
}

.btn-error {
	background: var(--error-color);
	color: #FFFFFF;
}

.btn-ghost {
	background: transparent;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.btn-text {
	background: transparent;
	color: var(--primary-color);
	border: none;
	padding: var(--spacing-sm) var(--spacing-md);
}

.btn-disabled {
	background: var(--bg-disabled) !important;
	color: var(--text-disabled) !important;
	border-color: var(--border-secondary) !important;
	cursor: not-allowed !important;
}

.btn-small {
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-md);
}

.btn-large {
	padding: var(--spacing-lg) var(--spacing-xxl);
	font-size: var(--font-size-xl);
}

.btn-round {
	border-radius: 50px;
}

/* 输入框样式 */
.input {
	width: 100%;
	padding: var(--spacing-md);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-medium);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-normal);
	color: var(--text-primary);
	background: var(--bg-primary);
	transition: border-color 0.3s ease;
}

.input:focus {
	border-color: var(--primary-color);
	outline: none;
}

.input-error {
	border-color: var(--error-color);
}

.input-disabled {
	background: var(--bg-disabled);
	color: var(--text-disabled);
	cursor: not-allowed;
}

/* 卡片样式 */
.card {
	background: var(--bg-primary);
	border-radius: var(--radius-large);
	box-shadow: var(--shadow-light);
	overflow: hidden;
}

.card-header {
	padding: var(--spacing-lg) var(--spacing-xl);
	border-bottom: 1px solid var(--border-light);
}

.card-body {
	padding: var(--spacing-xl);
}

.card-footer {
	padding: var(--spacing-lg) var(--spacing-xl);
	border-top: 1px solid var(--border-light);
	background: var(--bg-secondary);
}

/* 分隔线 */
.divider {
	height: 1px;
	background: var(--border-secondary);
	margin: var(--spacing-lg) 0;
}

.divider-vertical {
	width: 1px;
	background: var(--border-secondary);
	margin: 0 var(--spacing-lg);
}

/* 标签样式 */
.tag {
	display: inline-flex;
	align-items: center;
	padding: var(--spacing-xs) var(--spacing-sm);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	border-radius: var(--radius-small);
}

.tag-primary {
	background: rgba(79, 172, 254, 0.1);
	color: var(--primary-color);
}

.tag-success {
	background: rgba(82, 196, 26, 0.1);
	color: var(--success-color);
}

.tag-warning {
	background: rgba(250, 173, 20, 0.1);
	color: var(--warning-color);
}

.tag-error {
	background: rgba(255, 77, 79, 0.1);
	color: var(--error-color);
}

/* 徽章样式 */
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	background: var(--error-color);
	color: #FFFFFF;
	font-size: var(--font-size-xs);
	font-weight: 600;
	line-height: 1;
	border-radius: 9px;
}

.badge-dot {
	width: 8px;
	height: 8px;
	min-width: 8px;
	padding: 0;
	border-radius: 4px;
}

/* 加载动画 */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes slideInUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes slideOutDown {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}

.animate-spin {
	animation: spin 1s linear infinite;
}

.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

.animate-fadeIn {
	animation: fadeIn 0.3s ease-in-out;
}

.animate-fadeOut {
	animation: fadeOut 0.3s ease-in-out;
}

.animate-slideInUp {
	animation: slideInUp 0.3s ease-out;
}

.animate-slideOutDown {
	animation: slideOutDown 0.3s ease-in;
}

/* 响应式断点 */
@media (max-width: 375px) {
	:root {
		--font-size-xs: 9px;
		--font-size-sm: 11px;
		--font-size-md: 13px;
		--font-size-lg: 15px;
		--font-size-xl: 17px;
		--font-size-xxl: 19px;
		--font-size-title: 22px;
		--font-size-hero: 28px;
	}
}

@media (min-width: 768px) {
	:root {
		--font-size-xs: 11px;
		--font-size-sm: 13px;
		--font-size-md: 15px;
		--font-size-lg: 17px;
		--font-size-xl: 19px;
		--font-size-xxl: 21px;
		--font-size-title: 26px;
		--font-size-hero: 36px;
	}
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
	:root {
		--text-primary: #FFFFFF;
		--text-secondary: #CCCCCC;
		--text-placeholder: #999999;
		--text-disabled: #666666;
		
		--bg-primary: #1F1F1F;
		--bg-secondary: #2A2A2A;
		--bg-tertiary: #121212;
		--bg-disabled: #333333;
		
		--border-primary: #404040;
		--border-secondary: #333333;
		--border-light: #2A2A2A;
	}
}

/* 无障碍支持 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
	:root {
		--border-primary: #000000;
		--border-secondary: #666666;
		--text-placeholder: #666666;
	}
}